<template>
  <!--  -->
  <layout title="提现" background="#fff">
    <view class="withdrawal">
      <view class="withdrawal-form">
        <view class="withdrawal-form-item">
          <view class="withdrawal-form-item-wrap" @tap="show = true">
            <view class="w-label">提现到</view>
            <view class="w-value"
              >{{ type === "" ? "请选择" : typeText }}
              <image
                :src="getImgSrc('/user/icon_arrow_right@2x.png')"
                mode="widthFix"
            /></view>
          </view>
        </view>
        <view class="withdrawal-form-item" v-if="type === '4'">
          <view class="withdrawal-form-item-wrap" @tap="look">
            <view class="w-label">卡号</view>
            <view class="w-value"
              >{{ id ? id : "上传银行卡" }}
              <image :src="getImgSrc('/user/scan.png')" mode="widthFix"
            /></view>
          </view>
        </view>
        <view class="withdrawal-form-item" v-if="type === '4'">
          <view class="withdrawal-form-item-wrap">
            <view class="w-label">持卡人</view>
            <view class="w-value"
              ><input v-model="name" style="text-align: right"
            /></view>
          </view>
        </view>
        <view class="withdrawal-form-item">
          <view class="withdrawal-form-item-wrap">
            <view class="w-label">提现金额</view>
            <view class="w-value"></view>
          </view>
          <view class="withdrawal-amount">
            <text>￥</text>
            <input
              type="digit"
              v-model="amount"
              class="input"
              placeholder="请输入提现金额"
            />
          </view>
        </view>
        <view class="withdrawal-form-item">
          <view class="withdrawal-form-item-wrap withdrawal-footer">
            余额￥{{ wallet }}
            <text @tap="amount = wallet">全部提现</text>
          </view>
					<view class="withdrawal-form-item-wrap withdrawal-footer" style="color:red">
					  最小提现金额为￥100
					</view>
        </view>
      </view>
      <u-popup v-model="show" :border-radius="40" mode="bottom">
        <view class="withdrawal-select-list">
          <!-- <view
            class="withdrawal-select-list-item border"
            @tap="
              type = 1;
              show = false;
            "
          >
            <image :src="getImgSrc('/user/icon_zhi@2x.png')" />
            支付宝
          </view> -->
          <view
            v-for="(operator, idx) in operatorList"
            :key="operator.key"
            :class="`withdrawal-select-list-item ${
              idx < operatorList.length - 1 ? 'border' : ''
            }`"
            @tap="
              type = operator.key;
              show = false;
            "
          >
            <image :src="getImgSrc('/user/icon_yhk@2x.png')" />
            {{ operator.value }}
          </view>
          <view class="cancel" @tap="show = false"> 取消 </view>
        </view>
      </u-popup>
      <button
        class="withdrawal-btn"
        :disabled="type === '' || !amount || (type === '4' && !id)"
        @tap="triggerToSubmit"
      >
        确认提现
      </button>
    </view>
  </layout>
</template>
<script>
import { readImg, compressImg } from "@/common/minizerImg.js";

export default {
  name: "withdrawal",
  components: {},
  data() {
    return {
      operatorList: [],
      type: "", // 1 支付宝 2银行卡
      wallet: 0,
      amount: "",

      show: false,

      id: "", // 银行卡号
      name: "",
    };
  },
  onLoad(option) {},
  created() {
    this.triggerToFetch();
  },
  onShow() {},
  watch: {},
  computed: {
    typeText() {
      if (this.type === "") return "请选择";
      if (this.type === "3") return "支付宝";
      if (this.type === "4") return "银行卡";
    },
  },
  methods: {
     async compress(file) {
      const img = await readImg(file);
      const blob = await compressImg(img, file.type, 1000, 1000);
      return blob;
    },
    async look() {
      const { imageFiles } = await this.chooseImage();
      uni.uploadFile({
        url: this.vuex_config.baseUrl + "/applet/wallet/card/recognize",
        file: await this.compress(imageFiles[0]),
        header: {
          Authorization: this.vuex_tokenHead + this.vuex_token,
        },
        name: "file",
        success: (res) => {
          const data = JSON.parse(res.data);
          if (data.data) {
            this.requestId = data.data.requestId;
            this.id = data.data.cardNumber;
          } else {
            uni.showToast({
              title: data.message,
              duration: 2000,
              icon: "error",
            });
          }
        },
        fail: (err) => {
          console.log("上传失败");
        },
        complete: console.log,
      });
    },
    chooseImage: () => {
      return new Promise((res, rej) => {
        uni.chooseImage({
          count: 1,
          sizeType: "original",
          success: (e) => {
            res({
              imageList: e.tempFilePaths,
              imageFiles: e.tempFiles,
            });
          },
          fail: () => {
            uni.showToast({
              title: "选择图片失败，请确认权限",
            });
            rej();
          },
        });
      });
    },
    async triggerToFetch() {
      // 获取钱包余额
      // 获取钱包余额
      this.$u.api.queryWallet().then((res) => {
        this.wallet = res.data.current;
      });
      this.$u.api.queryWalletType().then((res) => {
        this.operatorList = res.data.type || [];
      });
    },
    triggerToSubmit() {
			if(this.amount <100) {
				uni.showToast({ title: '最小提现金额为￥100',icon: 'none'})
				return
			}
			if(this.type === '4') {
				if(!this.name === '' || !this.id === '') {
					uni.showToast({ title: '请输入持卡人姓名和上传卡号',icon: 'none'})
					return
				}
			}
      const _self = this;
      this.$u.api.invokeWalletOperator({
        type: this.type,
        card: this.id,
        fee: this.amount,
        name: this.name,
      }).then(res => {
				if(res.code === 200) {
					uni.redirectTo({
						url: `/pages/sys/user/withdrawal-result?fee=${_self.amount}&type=${this.type}`
					})
				} else {
					uni.showToast({ title: res.message || '提现请求提交失败',icon: 'none'})
				}
			})
    },
  },
};
</script>
<style lang="scss" scoped>
.withdrawal {
  min-height: 100vh;
  &-form {
    margin: 30rpx;
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    &-item {
      margin: 40rpx 36rpx 0 36rpx;
      border-bottom: 1rpx solid #eaeaea;
      &-wrap {
        display: flex;
        justify-content: space-between;
        padding-bottom: 36rpx;
        .w-value {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          image {
            margin-left: 33rpx;
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
    }
  }
  &-footer {
    justify-content: flex-start;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #696969;
    line-height: 46rpx;
    text {
      margin-left: 11rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #4e95fc;
      line-height: 46rpx;
    }
  }
  &-amount {
    display: flex;
    .input {
      height: 81rpx;
    }
    text {
      font-size: 60rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #282828;
      line-height: 81rpx;
    }
    /deep/.uni-input-placeholder {
      font-size: 60rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b5b5b5;
      line-height: 81rpx;
      height: 100%;
    }
    /deep/.uni-input-input {
      font-size: 60rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333;
      line-height: 81rpx;
    }
  }
  &-btn {
    margin: 60rpx auto;
    width: 690rpx;
    height: 96rpx;
    background-image: linear-gradient(90deg, #4aabf6, #4675f6);
    box-shadow: 0rpx 16rpx 30rpx 0rpx rgba(74, 169, 246, 0.2);
    border-radius: 47rpx;

    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 96rpx;

    &[disabled] {
      background-color: #eaeaea;
      background-image: none;
      color: #fff;
      box-shadow: none;
      &::after {
        content: none;
      }
    }
  }
  &-select-list {
    background: #fff;
    width: 750rpx;
    padding: 30rpx 0 calc(0 + env(safe-area-inset-bottom)) 0;
    display: flex;
    flex-direction: column;
    &-item {
      width: 670rpx;
      flex: 1;
      margin: 0 auto;
      height: 110rpx;
      min-height: 110rpx;
      display: flex;
      align-items: center;
      &.border {
        border-bottom: 1px solid #eaeaea;
      }
      image {
        width: 42rpx;
        height: 42rpx;
        margin-right: 10rpx;
      }
    }
    .cancel {
      height: 142rpx;
      min-height: 142rpx;
      margin-top: 24rpx;
      width: 100%;
      flex: 1;
      background: #f4f4f4;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
